<template>
  <div class="bar">
    <sn-three-col-space>
      <sn-row-has-two-col :left="9" :right="15" slot="spaceContent">
        <el-breadcrumb separator="/" slot="one-col" class="bar">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>商城</el-breadcrumb-item>
          <el-breadcrumb-item>XXX商品</el-breadcrumb-item>
        </el-breadcrumb>
      </sn-row-has-two-col>
      <el-divider/>
      <sn-row-has-two-col :left="10" :right="14" slot="spaceContent" class="ppp">
        <el-image :src="picture" slot="one-col" class="big-picture"/>
        <sn-text :text="detail" slot="two-col" :move-down=40 :font-size="30"/>
        <sn-text :text="price" slot="two-col" :move-down=85 :font-size="50" class="price"/>
        <sn-text :text="introduce" slot="two-col" :move-down=110 :font-size="15" class="introduce"/>
        <sn-text :text="service" slot="two-col" :move-down=130 :font-size="15" class="service"/>
        <sn-text :text="description" slot="two-col" :move-down=150 :font-size="15" class="description"/>
        <el-button type="danger" round slot="two-col" class="button">立即抢购</el-button>
      </sn-row-has-two-col>
    </sn-three-col-space>
  </div>

</template>

<script>
export default {
  name: "Detail",
  /*props: {
    picture: {
      type: String,
      default: ""
    },
  },*/
  data() {
    return {
      picture: "https://p0.meituan.net/moviemachine/b163e15051141cfc3d92ecd771d88cfc172015.jpg@128w_170h_1e_1c",
      detail: "第二张半价",
      price: "￥188",
      service: "服务：· 正版授权《售后服务》",
      description: "说明：该商品由第三方卖家提供",
      introduce: "购买第二张电影票的时候有半价优惠"
    }
  },
}
</script>

<style scoped>
.bar {
  margin-top: 30px;
  font-size: 20px;
}

.big-picture {
  width: 380px;
  height: 440px;
}

.ppp {
  margin-top: 100px;
}

.price {
  color: red;
}

.service {
  color: gray;
}

.description {
  color: orange;
}

.introduce {
  color: gray;
}

.button {
  margin-top: 200px;
}
</style>